<script setup lang="ts">
import { inject, ref } from 'vue'
import { Node } from '@antv/x6'
import './node-style.scss'
import {NodeDataItem} from "@/views/ai/agent/x6/node/types";

const v=ref()
const id=ref<string>()
const getNode=inject<()=>Node>('getNode')
const formData=reactive<{values:string[]}>({
  values:[]
})
if(getNode){
  const node=getNode()
  id.value=node.id
  node.setData(formData)
}
onBeforeMount(()=>{
  if(getNode){
    const node=getNode()
    const d=node.getData()
    if (d){
      Object.assign(formData,d)
    }else {
      node.setData(formData,{deep:true,overwrite:true})
    }
  }
})
const addNewValue=()=>{
  if (v.value){
    formData.values.push(v.value)
  }
  v.value=undefined
}
const del=(v:string)=>{
  formData.values=formData.values.filter(x=>x!==v)
}
watch(formData,()=>{
  if(getNode){
    const node=getNode()
    node.setData(formData,{deep:true,overwrite:true})
  }
},{deep:true,immediate:false})
</script>

<template>
  <div class="node">
    <div class="line5 node-title">
      <div class="flow-dot" magnet="true" :class="'flow-exec'" x-type="input-exec" :x-id="'input-if_'+id"></div>
      <div>常量输出</div>
      <div class="flow-dot flow-right flow-exec" magnet="true" x-type="output-exec" :x-id="'output-exec_'+id"></div>
    </div>
    <div class="line5" style="margin-bottom: 10px">
      <el-input placeholder="要输出的值" v-model="v"/>
      <el-button @click="addNewValue">新增常量</el-button>
    </div>
    <el-form>
      <el-form-item v-for="(v,index) in formData.values" :key="index">
        <div class="line5" style="width: 100%">
          <el-input :disabled="true" style="flex: 1" :model-value="v" >
            <template #suffix>
              <el-button link type="danger" @click="del(v)">删除</el-button>
            </template>
          </el-input>
          <span>String</span>
          <div class="flow-dot flow-string" magnet="true" x-type="output-string" :x-id="'output-text_'+id" :x-key="index"></div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="scss">

</style>
